<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="searchword">
			<u-search placeholder="请输入搜索关键词" shape="square" :value="keyword" @change="keywordChange" @custom="canlsou"
				@search="searchlist" actionText="取消" bgColor="#f7f8fa"></u-search>
		</view>

		<!-- 历史搜索和热门搜索 -->
		<view class="history" v-if="show === 1">
			<!-- 历史搜索 -->
			<view class="history_item">
				<view class="history_title">
					历史记录
				</view>
				<view class="history_item_list">
					<u-tag v-for="(item,index) in historyKeywordList" :key="index" :text="item" plain size="mini"
						type="warning" color="#969799" borderColor="#969799" @tap="changehistory(item)">
					</u-tag>
				</view>
			</view>

			<view class="history_item">
				<view class="history_title">
					热门搜索
				</view>
				<view class="history_item_list">
					<u-tag v-for="(item,index) in hotKeywordList" :text="item.keyword" :key="index"
						v-if="item.is_hot === 0" plain size="mini" type="warning" color="#969799" borderColor="#969799"
					 @tap="changehistory(item.keyword)">
					</u-tag>
					<u-tag :text="item.keyword" v-else :key="index" plain size="mini" type="warning" color="#ff0000"
					 borderColor="#ff0000" @tap="changehistory(item.keyword)">
					</u-tag>
				</view>
			</view>
		</view>

		<!-- 搜索列表 -->
		<view class="search" v-else-if="show === 2">
			<view class="search_list">
				<u-list>
					<u-list-item v-for="(item, index) in keywordList" :key="index">
						<u-cell :title="item" @click="keywordClick(item)">
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods_list_area" v-else>
			<view v-if="goodsList.length > 0">
				<fy-dropdown :menuList="menuList" activeColor="darkred">
					<fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" :options="columnOptions"
						type="column" @change="handlerColumnChange"></fy-dropdown-item>
					<fy-dropdown-item v-model="priceValue" dropdownKey="price" :options="priceOptions"
						@change="handlerTypeChange"></fy-dropdown-item>
					<fy-dropdown-item v-model="salesValue" dropdownKey="sales" :options="salesOptions"
						@change="handlerTypeChange"></fy-dropdown-item>
				</fy-dropdown>
				<cd-goods-list :goodsList="goodsList"></cd-goods-list>
			</view>

			<u-empty v-else mode="search" text="暂无商品" icon="http://cdn.uviewui.com/uview/empty/search.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import cdGoodsList from "@/components/cd-goods-list/cd-goods-list.vue"
	import {
		ApisearchHistory,
		ApisearchKeyword,
		ApisearchGoodsList
	} from "@/utils/api.js"
	export default {
		components: {
			'cd-goods-list': cdGoodsList
		},
		data() {
			return {

				menuList: [{
					title: '综合',
					dropdownKey: 'synthesis',
					disabled:true
				}, {
					title: '价格',
					dropdownKey: 'price'
				}, {
					title: '分类',
					dropdownKey: 'sales'
				}],
				//综合
				synthesisValue: '',
				columnOptions: [{
						title: '任务类型',
						key: 'type',
						default: '',
						
						list: [{
							text: '全部',
							value: ''
						}, {
							text: '类型1',
							value: '2'
						}, {
							text: '类型2',
							value: '1'
						}]
					},
					
					{
						title: '任务状态',
						key: 'status',
						default: '',
						list: [{
							text: '全部',
							value: ''
						}, {
							text: '已完结',
							value: '1'
						}, {
							text: '工作中',
							value: '2'
						}]
					},
				],
				
				//价格
				priceValue: '',
				priceOptions: [{
					label: '价格由高到低',
					value: 'desc'
				}, {
					label: '价格由低到高',
					value:'asc'
				}],
				
				//分类
				salesValue: '',
				salesOptions: [],


				keyword: '',
				show: 1,
				historyKeywordList: [],
				hotKeywordList: [],
				keywordList: [], //关键词列表
				goodsList: [],
				// filterCategory:[],
				cancal: false,
			}
		},
		onShow() {
			this.getHistory()
		},
		methods: {
			async getHistory() {
				let res = await ApisearchHistory();
				if (res.errno !== 0) return;

				// console.log(res)
				let {
					historyKeywordList,
					hotKeywordList,
					defaultKeyword
				} = res.data;
				//历史关键词
				this.historyKeywordList = historyKeywordList;
				// 热门
				this.hotKeywordList = hotKeywordList;
				//关键词
				// this.keyword = defaultKeyword.keyword;

			},
			async keywordChange(e) {
				if (this.cancal) {
					this.cancal = false;
					return;
				}

				this.keyword = e.trim();
				let res = await ApisearchKeyword(this.keyword);
				if (res.errno !== 0) return;

				this.keywordList = res.data;
				this.show = 2;

				// console.log(res);
			},
			//使用API搜索
			async searchActions() {
				let res = await ApisearchGoodsList({
					keyword:this.keyword,
					order:this.priceValue === ''?null : this.priceValue,
					sort:'price',
					categoryId:this.salesValue
				});
				if (res.errno !== 0) return;
				console.log(res)
				this.goodsList = res.data.goodsList;
				
				this.salesOptions = res.data.filterCategory.map(item=>{
					return{
						label:item.name,
						value:item.id
					}
				})
				// this.filterCategory = res.data.filterCategory
			},
			canlsou() {
				this.show = 1;
				this.keyword = "";
				this.cancal = false;

				// uni.switchTab({
				// 	url:"/pages/index/index"
				// })
			},
			searchlist() {
				this.show = 3;
				this.searchActions();
			},
			//关键词标签点击
			changehistory(keyword) {
				this.keyword = keyword;
			},
			//前往搜索
			keywordClick(keyword) {
				this.searchActions();
				this.keyword = keyword;
				this.show = 3;
				this.cancal = true;
			},
			handlerColumnChange(e) {
				if (e.cancel) return;

			 this.columnOptions.forEach(item => {
					item.default = e.data[item.key];
				})
			},
			handlerTypeChange(e) {
				console.log(e);
				this.searchActions();
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef;
	}

	.searchword {
		padding: 10px 15px;
		// height: 108rpx;
		background-color: #fff;

	}

	.history {
		width: 100vw;

		.history_item {
			width: 100%;
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin-bottom: 40rpx;

			.history_title {
				font-size: 38rpx;
				margin-bottom: 20rpx;
			}

			.history_item_list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.u-transition {
					margin-right: 20rpx !important;
					margin-bottom: 20rpx !important;

				}

			}
		}
	}

	.search {
		.search_list {
			.u-list-item {
				background-color: #fff;
			}
		}

	}

	.goods_list_area {
		background-color: #fff;
		padding-bottom: 30rpx;
	}
</style>
